﻿<UserControl x:Class="JayDev.MediaScribe.View.Controls.MediaControlsControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="102" d:DesignWidth="916"
             xmlns:nmControls="clr-namespace:JayDev.MediaScribe.View.Controls"
             xmlns:nmConverters="clr-namespace:JayDev.MediaScribe.Converters"
             xmlns:local="clr-namespace:JayDev.MediaScribe.Core"
             x:Name="MediaControlsControlName" Background="Transparent">
    <UserControl.Resources>
        <ResourceDictionary>
            <nmConverters:TimeSpanToSecondsConverter x:Key="timespanConverter" />
            <nmConverters:SecondsToTimeSpanConverter x:Key="secondsConverter" />
            <nmConverters:PlayButtonVisibilityConverter x:Key="playButtonConverter" />
            <nmConverters:PauseButtonVisibilityConverter x:Key="pauseButtonConverter" />
            <nmConverters:NumericRangeVisibilityConverter x:Key="muteVolumeConverter" 
                VisibleFrom="0" VisibleTo="0" />
            <nmConverters:NumericRangeVisibilityConverter x:Key="minVolumeConverter" 
                VisibleFrom="1" VisibleTo="32" />
            <nmConverters:NumericRangeVisibilityConverter x:Key="medVolumeConverter" 
                VisibleFrom="33" VisibleTo="66" />
            <nmConverters:NumericRangeVisibilityConverter x:Key="maxVolumeConverter" 
                VisibleFrom="67" VisibleTo="100" />
            <DataTemplate x:Key="PreviewDataTemplate">
                <TextBlock Text="{Binding StringFormat=\{0:00.00\}, Converter={StaticResource secondsConverter}}"/>
            </DataTemplate>

            <Style x:Key="PreviewStyle" TargetType="{x:Type ContentControl}">
                <Setter Property="ContentTemplate" Value="{StaticResource PreviewDataTemplate}"/>
                <Setter Property="IsHitTestVisible" Value="False"/>
                <Setter Property="Margin" Value="-30,-70,0,0" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ContentControl}">
                            <Grid Margin="-5" Width="70" Height="70">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="0.5*"/>
                                    <RowDefinition Height="0.5*"/>
                                </Grid.RowDefinitions>
                                <Grid.Effect>
                                    <DropShadowEffect BlurRadius="5"  ShadowDepth="2"/>
                                </Grid.Effect>
                                <Rectangle Stroke="#FF3F3F3F" StrokeThickness="1">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FFDAC9FF" Offset="0"/>
                                            <GradientStop Color="#FFAC7EFF" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <Path Stretch="Fill" Stroke="#FF3F3F3F" HorizontalAlignment="Center" Margin="20,-1,19.5,-1" VerticalAlignment="Stretch" Width="0.5" Data="M18.875,30.200352 L19.125,40" Grid.Row="1" />

                                <Viewbox HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5">
                                    <ContentPresenter  />
                                </Viewbox>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Foreground" Value="#FF3F3F3F"/>
            </Style>
        </ResourceDictionary>

    </UserControl.Resources>
    

        <Grid Name="BottomBar"  Height="75" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="auto">

        <Rectangle Fill="#CEd3ecff" Height="5" VerticalAlignment="Top">
        </Rectangle>
        <Viewbox Stretch="Fill" Margin="0,4,0,0">
                <Grid Height="60" Width="1832">

                    <Rectangle Height="60" Stroke="#AA75B2DE" VerticalAlignment="Center"  StrokeThickness="1" d:LayoutOverrides="HorizontalAlignment">
                        <Rectangle.Fill>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#AA8CCDFD" Offset="1"/>
                                <GradientStop Color="#AAE3F3FF" Offset="0.017"/>
                                <GradientStop Color="#AAB8E1FF" Offset="0.487"/>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Rectangle Height="39.01" Margin="1.144,0.544,1.126,0" VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment">
                        <Rectangle.Fill>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <LinearGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterY="0.5" CenterX="0.5" ScaleY="0.559" ScaleX="1.117"/>
                                        <SkewTransform AngleY="0" AngleX="0" CenterY="0.5" CenterX="0.5"/>
                                        <RotateTransform Angle="0" CenterY="0.5" CenterX="0.5"/>
                                        <TranslateTransform X="0.058" Y="-0.22"/>
                                    </TransformGroup>
                                </LinearGradientBrush.RelativeTransform>
                                <GradientStop Color="#AAFFFFFF" Offset="0"/>
                                <GradientStop Offset="1"/>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Rectangle Height="40.016" Margin="1.464,19.124,1.154,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" d:LayoutOverrides="HorizontalAlignment">
                        <Rectangle.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform/>
                                <RotateTransform Angle="180"/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </Rectangle.RenderTransform>
                        <Rectangle.Fill>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <LinearGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterY="0.5" CenterX="0.5" ScaleY="0.559" ScaleX="1.117"/>
                                        <SkewTransform AngleY="0" AngleX="0" CenterY="0.5" CenterX="0.5"/>
                                        <RotateTransform Angle="0" CenterY="0.5" CenterX="0.5"/>
                                        <TranslateTransform X="0.058" Y="-0.22"/>
                                    </TransformGroup>
                                </LinearGradientBrush.RelativeTransform>
                                <GradientStop Color="#AAFFFFFF" Offset="0"/>
                                <GradientStop Offset="0.315"/>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>

                </Grid>
            </Viewbox>

            <!-- NOTE: margin of -3 on top brings the controls BAM next to everything else... but it feels like something's missing then.-->
            <!-- NOTE 2: There is also a 'MouseLeftButtonDown' event, which is hooked up in the class contructor (since the event is
                         swallowed by the slider, we need to instruct it to capture handled events too, which can't be done via XAML)-->
            <Grid x:Name="TrackBar" Margin="0 0 0 0" Height="12" VerticalAlignment="Top">
                <Slider Name="timeSlider" SmallChange="0.5" TickFrequency="0.5" Height="15" 
                    Style="{DynamicResource JarrodSlider}" 
        		local:SliderPreviewHelper.PreviewEnabled="True"  
        		local:SliderPreviewHelper.ContentStyle="{StaticResource PreviewStyle}"      
                Value="{Binding ElementName=MediaControlsControlName, Path=CurrentPlayTime, Converter={StaticResource timespanConverter}, Mode=TwoWay, UpdateSourceTrigger=Explicit}"
                Maximum="{Binding ElementName=MediaControlsControlName, Path=MaxPlayTime, Converter={StaticResource timespanConverter}}"
                Minimum="0"
                />
            </Grid>




            <Grid Margin="0 10.5 0 0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="40"/>
                    <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="40"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <Grid Grid.Column="0" VerticalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <DockPanel>
                        <StackPanel Grid.Column="0" Orientation="Horizontal" Margin="20 0 0 0">
                        <TextBlock Foreground="#FF3F3F3F" Name="currentPlayTime" HorizontalAlignment="Left" Text="{Binding ElementName=MediaControlsControlName, Path=CurrentPlayTime, StringFormat=h\\:mm\\:ss}"/>
                        <TextBlock Foreground="#FF3F3F3F" HorizontalAlignment="Left" xml:space="preserve"> /</TextBlock>
                        <TextBlock Foreground="#FF3F3F3F" Name="totalTrackTime" HorizontalAlignment="Left" Text="{Binding ElementName=MediaControlsControlName, Path=MaxPlayTime, StringFormat=h\\:mm\\:ss}"/>
                        <TextBlock Foreground="#FF3F3F3F" HorizontalAlignment="Left" xml:space="preserve"> - </TextBlock>
                        <TextBlock Foreground="#FF3F3F3F" HorizontalAlignment="Left" Text="{Binding ElementName=MediaControlsControlName, Path=TrackTitle, StringFormat=h\\:mm\\:ss, TargetNullValue='No track selected'}"/>


                        </StackPanel>
                    </DockPanel>
                </Grid>


            <Button Grid.Column="1" x:Name="prevButton" Style="{StaticResource GlassButton}" Width="32" Height="32"
                    Command="{Binding ElementName=MediaControlsControlName, Path=PrevTrackCommand}">
                <Grid RenderTransformOrigin="0.5, 0.5">
                    <Grid.RenderTransform>
                        <RotateTransform Angle="180" />
                    </Grid.RenderTransform>
                    <Path x:Name="nextPath3"
					Data            = "M0,0 L0.5,1 L0,2 Z" Margin="-5 3 0 0" Height="15" Stretch="Fill" Width="11" Stroke="#FF0E244E" StrokeThickness="0.8">
                        <Path.Fill>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FFBABABA" Offset="0.629"/>
                                <GradientStop Color="White" Offset="0.409"/>
                            </LinearGradientBrush>
                        </Path.Fill>
                    </Path>
                    <Path x:Name="nextPath4"
					Data = "M5,5 L5,0 0,0 0,5 Z" Margin="14 3 0 0" Height="15" Stretch="Fill" Width="3.8" Stroke="#FF0E244E" StrokeThickness="0.8">
                        <Path.Fill>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FFBABABA" Offset="0.629"/>
                                <GradientStop Color="White" Offset="0.409"/>
                            </LinearGradientBrush>
                        </Path.Fill>
                    </Path>
                </Grid>
            </Button>

            <Button Grid.Column="2" x:Name="stopButton" Style="{StaticResource GlassButton}" Width="42" Height="42" 
                    Command="{Binding ElementName=MediaControlsControlName, Path=StopCommand}">
                <Path x:Name="stop"
				Data = "M5,5 L5,0 0,0 0,5 Z" Margin="0 0 0 0" Height="16" Stretch="Fill" Width="16" Stroke="#FF0E244E" StrokeThickness="1">
                    <Path.Fill>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFBABABA" Offset="0.629"/>
                            <GradientStop Color="White" Offset="0.409"/>
                        </LinearGradientBrush>
                    </Path.Fill>
                </Path>
            </Button>

            
                <Button Grid.Column="3" x:Name="playButton" Style="{StaticResource GlassButton}" Width="42" Height="42"
                     Command="{Binding ElementName=MediaControlsControlName, Path=PlayPauseCommand}">
                <Grid>
                    <Grid Visibility="{Binding ElementName=MediaControlsControlName, Path=PlayStatus, Converter={StaticResource playButtonConverter}}">
                <Path x:Name="arrow" Width="16" Margin="4 0 0 0" Height="20"
				Data            = "M 1,6 L 6,3 L 1,0 L 1,6 Z"  Stretch="Fill" Stroke="#FF0E244E" StrokeThickness="1">
                    <Path.Fill>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFBABABA" Offset="0.629"/>
                            <GradientStop Color="White" Offset="0.409"/>
                        </LinearGradientBrush>
                    </Path.Fill>
                </Path>
                    </Grid>
                    <Grid Visibility="{Binding ElementName=MediaControlsControlName, Path=PlayStatus, Converter={StaticResource pauseButtonConverter}}">
                        <Path 
					Data = "M5,5 L5,0 0,0 0,5 Z" Margin="-9 0 0 0" Height="20" Stretch="Fill" Width="6" Stroke="#FF0E244E" StrokeThickness="1">
                            <Path.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFBABABA" Offset="0.629"/>
                                    <GradientStop Color="White" Offset="0.409"/>
                                </LinearGradientBrush>
                            </Path.Fill>
                        </Path>
                        <Path 
					Data = "M5,5 L5,0 0,0 0,5 Z" Margin="9 0 0 0" Height="20" Stretch="Fill" Width="6" Stroke="#FF0E244E" StrokeThickness="1">
                            <Path.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFBABABA" Offset="0.629"/>
                                    <GradientStop Color="White" Offset="0.409"/>
                                </LinearGradientBrush>
                            </Path.Fill>
                        </Path>

                    </Grid>
                </Grid>
            </Button>


            <Button Grid.Column="4" x:Name="nextButton" Style="{StaticResource GlassButton}" Width="32" Height="32"
                    Command="{Binding ElementName=MediaControlsControlName, Path=NextTrackCommand}">
                <Grid>
                    <Path x:Name="nextPath1"
					Data            = "M0,0 L0.5,1 L0,2 Z" Margin="-5 -3 0 0" Height="15" Stretch="Fill" Width="11" Stroke="#FF0E244E" StrokeThickness="0.8">
                        <Path.Fill>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FFBABABA" Offset="0.629"/>
                                <GradientStop Color="White" Offset="0.409"/>
                            </LinearGradientBrush>
                        </Path.Fill>
                    </Path>
                    <Path x:Name="nextPath2"
					Data = "M5,5 L5,0 0,0 0,5 Z" Margin="14 -3 0 0" Height="15" Stretch="Fill" Width="4.0" Stroke="#FF0E244E" StrokeThickness="0.8">
                        <Path.Fill>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FFBABABA" Offset="0.629"/>
                                <GradientStop Color="White" Offset="0.409"/>
                            </LinearGradientBrush>
                        </Path.Fill>
                    </Path>
                </Grid>
            </Button>
                
                
                
            <Grid Grid.Column="5" VerticalAlignment="Center" Margin="0 0 20 0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="65"/>
                    <ColumnDefinition Width="150"/>
                </Grid.ColumnDefinitions>
                <!--<Button Grid.Column="0" Template="{StaticResource SpeakerIcon}"/>-->
                <!--<Label Grid.Column="1" HorizontalAlignment="Right">Volume</Label>-->
                <!--<nmControls:ImageButton Grid.Column="1" Height="40" Width="40" MySource="/MediaScribe;component/Images/stock_volume-max.png" Command="{Binding CreateCourseCommand}">
                </nmControls:ImageButton>-->
                <Grid Grid.Column="1">
                    <Image Source="/MediaScribe;component/Images/stock_volume-mute.png" Margin="0,0,0,0" Width="33" Height="33" Visibility="{Binding ElementName=MediaControlsControlName, Path=Volume, Converter={StaticResource muteVolumeConverter}}" />
                    <Image Source="/MediaScribe;component/Images/stock_volume-min.png" Margin="0,1,0,0" Width="32" Height="32" Visibility="{Binding ElementName=MediaControlsControlName, Path=Volume, Converter={StaticResource minVolumeConverter}}" />
                    <Image Source="/MediaScribe;component/Images/stock_volume-med.png" Margin="0,1,0,0" Width="32" Height="32" Visibility="{Binding ElementName=MediaControlsControlName, Path=Volume, Converter={StaticResource medVolumeConverter}}" />
                    <Image Source="/MediaScribe;component/Images/stock_volume-max.png" Margin="0,1,0,0" Width="32" Height="32" Visibility="{Binding ElementName=MediaControlsControlName, Path=Volume, Converter={StaticResource maxVolumeConverter}}" />
                </Grid>
                <Slider VerticalAlignment="Center" Grid.Column="2" Maximum="100" Minimum="0"  Value="{Binding ElementName=MediaControlsControlName, Path=Volume, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" IsSnapToTickEnabled="False" IsMoveToPointEnabled="True" />
            </Grid>
        </Grid>
    </Grid>
</UserControl>
